<template>
	<view class="container">
		<table class="questions-table">
			<tr v-for="(i, v) in info" :key="v" class="question-row">
				<td v-if="v == index" class="question-cell">
					<view class="question-content">
						<span class="question-number">{{ v + 1 }}.</span>
						<span class="question-text">{{ info[v].content }}</span>
					</view> <br>
					<view v-if="answer!=''" class="solution-content">{{answer}}</view>
				</td>
			</tr>
		</table>
		<view v-if="length != 0" class="button-container">
			<button @click="Up()" class="nav-button"><</button>
			<button @click="Grasps(info[index].p_id,info[index].ID)" class="action-button mastered">已掌握</button>
			<button @click="Answer(index)" class="action-button not-mastered">答案</button>
			<button @click="Dn()" class="nav-button">></button>
		</view>
	</view>
</template>

<script>
	import {
		grasps,
		getInterviewList,
		recordSwipeTime,
	} from '@/utils/api/interview.js';
	export default {
		data() {
			return {
				index: 0,
				info: [],
				cate_id: 0,
				p_id: 0,
				length: 0,
				answer: "",
			}
		},
		onLoad(option) {
			this.RecordSwipeTime('add')
			this.cate_id = option.id
			this.InterviewList()
		},
		onUnload() {
			this.RecordSwipeTime('update')
		},
		onHide() {
			this.RecordSwipeTime('update')
		},
		methods: {
			Answer(index) {
				this.answer = this.info[index].inter_solution
			},

			Grasps(pid, inter_id) {
				grasps({
					interviews_id: inter_id,
					p_id: pid,
				}).then(res => {
					console.log()
					this.info = this.info.filter(item => item.ID !== this.info[this.index].ID);
					this.index = this.index - 1
					console.log(this.info)
					if (res.data.code == 0) {
						alert("已掌握")
					} else {
						alert(res.data.message)
					}
				})
			},

			Dn() {
				this.answer = ""
				this.index = (this.index + 1)
				var ind = this.info.length
				if (this.index >= parseInt(ind)) {
					this.index = parseInt(ind) - 1
				}
			},

			Up() {
				this.answer = ""
				this.index = (this.index - 1)
				if (this.index < 0) {
					this.index = 0
				}
			},

			InterviewList() {
				var fase = this
				var ind = this.index
				getInterviewList({
					cate_id: parseInt(this.cate_id),
					p_id: parseInt(this.p_id)
				}).then(res => {
					fase.info = res.data.data
					fase.length = fase.info.length
				})
			},

			RecordSwipeTime(from) {
				let date = Date.now()
				recordSwipeTime({
					time: date,
					from: from
				}).then(res => {

				})
			}
		}
	}
</script>

<style>
	.container {
		width: 80%;
		margin: 0 auto;
		font-family: Arial, sans-serif;
		background-color: #f8f9fa;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.questions-table {
		width: 100%;
		border-collapse: collapse;
	}

	.question-row {
		border-bottom: 1px solid #dee2e6;
	}

	.question-cell {
		padding: 20px;
	}

	.question-content {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.question-number {
		font-weight: bold;
		color: #495057;
	}

	.question-text {
		margin-left: 5px;
		color: #212529;
	}

	.solution-content {
		font-size: 16px;
		color: #343a40;
		background-color: #e9ecef;
		padding: 10px;
		border-radius: 5px;
	}

	.button-container {

		margin-top: 20px;
		text-align: center;
		display: flex;
		justify-content: space-evenly;
		height: 40px;
	}

	.nav-button,
	.action-button {
		margin: 5px;
		height: 35px;
		padding: 0px 20px;
		font-size: 12px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	.nav-button {
		background-color: #007bff;
		color: white;
	}

	.action-button {
		background-color: #28a745;
		color: white;
	}

	.action-button.not-mastered {
		background-color: #dc3545;
	}

	.button-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 10px;
		gap: 0;

	}

	@media (max-width: 600px) {

		.nav-button,
		.action-button {
			text-align: center;
			margin: 5px;
			height: 30px;
			padding: 0px 15px;
			font-size: 13px;
			border-radius: 5px;
		}

		.not-mastered:hover {
			background-color: #c82333;
		}
	}
</style>